<template>
  <div class="education">
    <div class="title">教育头条</div>
    <div class='edubox'>
      <el-table
        :data="eduList"
        style="width: 100%">
        <el-table-column
          label="列表图"
          width="100">
          <template slot-scope="slot">
            <img :src="getImgUrl(slot.row.face)" alt="">
          </template>
        </el-table-column>
        <el-table-column
          prop="theachername"
          label="标题"
          width="160">
        </el-table-column>
        <el-table-column
          prop="info"
          label="描述"
          width='300'>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      eduList: [{
        face: 'main-jiaoyutoutiao.png',
        theachername: '30所京城中小学这样过“世界读书口"',
        info: '4月23日是世界读书日。设立目的是推动更多的人去阅读和写作,希望所有人都能尊重和感谢为人类文明做出过巨大贡献的文学、文化、科学、思想大师们,保护知识产权。',
      },
      {
        face: 'main-jiaoyutoutiao.png',
        theachername: '30所京城中小学这样过“世界读书口"',
        info: '4月23日是世界读书日。设立目的是推动更多的人去阅读和写作,希望所有人都能尊重和感谢为人类文明做出过巨大贡献的文学、文化、科学、思想大师们,保护知识产权。',
      }]
    }
  },
  methods: {
    getImgUrl(src){
      return require('@/assets/img/main/' + src)
    }
  },
}
</script>
<style lang="less" scoped>
  .title{
    padding: 24px 0 4px 24px;
    font-size: 16px;
    color: #333;
    font-weight: bold;
    &::before{
      content: '';
      display: inline-block;
      background-color:#3c87fe;
      width: 4px;
      height: 21px;
      margin-right: 20px;
      vertical-align:sub;
    }
    &:hover,&:focus{
      color: #438afe;
    }
  }
  .education{
    width: 700px;
    height: 500px;
    background-color: white;
  }
  .edubox{
    padding: 0 50px;
  }
  /deep/th{
    padding: 5px 0 !important;
    font-weight: bold;
    font-size: 16px;
    color: #333;
  }
  /deep/.el-table tr{
    height: 45px !important;
  }
  /deep/tbody{
    td:nth-last-child(1) .cell{
      word-break: break-all;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
      height: 45px;
    }
    .el-table__cell{
    padding: 5px 0 !important;
    }
  }
  /deep/.el-table::before{
    height: 0;
  }
  /deep/.el-table th.el-table__cell.is-leaf{
    border: none;
  }
  /deep/.el-table td.el-table__cell,.el-table th.el-table__cell.is-leaf{
    border: none !important;
  }
</style>